<template>
  <div>
    <div
      class="pc"
      v-if="!$isMobile"
    >
      <UserAction />
      <div
        class="UserCenter"
        v-if="isShow"
      >
        <div class="g-con">
          <div class="left">
            <el-menu
              class="el-menu-vertical-demo"
              v-for="(item, index) in menuList[type]"
              :key="item"
              :default-active="activeMenu"
            >
              <div v-if="!item.hasChild">
                <div
                  v-if="item.href == 'self'"
                  @click="changeMenu(item.tabkey, index)"
                >
                  <el-menu-item :index="index + ''">
                    {{ t(item.lable) }}
                  </el-menu-item>
                </div>
                <div v-else>
                  <router-link
                    :to="{ path: item.href, query: item.params }"
                    v-if="getAuth(item)"
                  >
                    <el-menu-item :index="index + ''">
                      {{ t(item.lable) }}
                    </el-menu-item>
                  </router-link>
                </div>
              </div>
              <div v-else>
                <el-sub-menu :index="index + ''">
                  <template #title>
                    <span>{{ t(item.lable) }}</span>
                  </template>
                  <el-menu-item-group>
                    <div
                      v-for="(child, idx) in item.children"
                      :key="idx"
                      :index="index + '-' + idx"
                    >
                      <router-link
                        v-if="getAuth(child)"
                        :to="{ path: child.href, query: child.params }"
                      >
                        <el-menu-item>{{ t(child.lable) }}</el-menu-item>
                      </router-link>
                    </div>
                  </el-menu-item-group>
                </el-sub-menu>
              </div>
            </el-menu>
          </div>
          <div
            class="right"
            v-if="Object.keys(infoObj).length != 0"
          >
            <div v-if="activeSelfRight === '1'">
              <el-card
                class="box-card"
                v-for="(item, index) in rightMessage[type]"
                :key="index"
              >
                <template #header>
                  <div class="card-header">
                    <span>{{ t(item.title) }}</span>
                  </div>
                </template>
                <div class="card-body">
                  <p v-if="!(locale === 'en' && item.hideEn)">{{ item.sloganTxt ? t(item.sloganTxt) : infoObj[item.firstKey][item.sloganKey] }}</p>
                  <div
                    class="bottom"
                    v-if="infoObj[item.firstKey]"
                  >
                    <div v-if="item.firstKey != 'mainPageForumInfoVo'">
                      <ul class="card-item">
                        <li
                          v-for="(child, idx) in item.listData"
                          :key="idx"
                        >
                          <p class="num">{{ infoObj[item.firstKey][child.key] }}</p>
                          <p class="name">{{ t(child.name) }}</p>
                        </li>
                      </ul>
                    </div>
                    <div v-else>
                      <p
                        v-for="(child, idx) in item.listData"
                        :key="idx"
                        class="txt"
                      >
                        {{ infoObj[item.firstKey][child.key][0] }}
                        <span v-if="infoObj[item.firstKey][child.key][0]">{{ t(child.name) }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
            <div v-if="activeSelfRight === '2'">
              <RecentContact />
            </div>
            <div v-if="activeSelfRight === '3'">
              <ResumeCollection />
            </div>
          </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
    <div v-if="$isMobile">
      <mIndex />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useLogin from '@/stores/login'
import { useI18n } from 'vue-i18n'
import UserAction from '@/components/UserAction.vue'
import { menuList, rightMessage } from './common.js'
import { getInfo } from '@/service/personalHomepage'
import mIndex from './mIndex.vue'

import RecentContact from './cmp/RecentContact.vue'
import ResumeCollection from './cmp/ResumeCollection.vue'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

onMounted(() => {
  init()
})

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()
const store = useLogin()

//
const activeMenu = ref('')
const type = store.userInfo?.registerClassCode
const customerClassCode = store.userInfo?.customerClassCode
const memberGradeCode = store.userInfo?.memberGradeCode

// 权限判断
const getAuth = (item) => {
  let res = true

  // 角色
  if (item.customerClassCode) {
    // console.log(t(item.lable), item.reGradeCode, customerClassCode)
    res = item.customerClassCode.includes(customerClassCode)
  }

  // 会员
  // if (item.reGradeCode) {
  //   // console.log(t(item.lable), item.reGradeCode, memberGradeCode)
  //   res = !item.reGradeCode.includes(memberGradeCode) // 取反
  // }

  return res
}

const activeSelfRight = ref('1')

const isShow = computed(() => {
  return route.path === '/personalHomepage'
})

//
const changeMenu = (tabkey, index) => {
  activeSelfRight.value = tabkey
  activeMenu.value = index + ''
}

//
const infoObj = ref({})
const getinfo = () => {
  getInfo().then((res) => {
    infoObj.value = res.data
  })
}

//
const init = () => {
  getinfo()
}
</script>

<style scoped lang="scss">
.pc {
  .UserCenter {
    background: rgba(245, 245, 245, 1);
    padding: 30px 0 80px;
    margin-bottom: -76px;

    .g-con {
      display: flex;

      .left {
        width: 240px;
        min-height: 660px;
        background: white;

        ul {
          font-size: 14px;
          font-weight: bold;
          color: #252628;
        }
      }

      .right {
        margin-left: 20px;
        flex: 1;

        .box-card {
          padding-left: 30px;
          display: flex;
          flex-direction: column;

          &:not(:last-of-type) {
            margin-bottom: 30px;
          }

          :deep(.el-card__header) {
            border-bottom: 2px solid black;
          }

          :deep(.card-header) {
            span {
              font-size: 20px;
            }

            font-weight: bold;
            color: #ca2a02;
          }

          .card-body {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;

            .bottom {
              width: 100%;
              display: flex;
              margin-top: 40px;

              div {
                width: 100%;

                .txt {
                  width: 100%;
                  background: rgba(245, 245, 245, 1);
                  font-size: 14px;
                  
                  font-weight: 400;
                  color: #6a6973;
                  line-height: 44px;
                  padding-left: 16px;
                }
              }
            }
          }

          .card-item {
            width: 100%;
            display: flex;
            justify-content: space-between;

            li {
              // flex: 1;
              text-align: center;

              &:not(:nth-child(1)) {
                margin-left: 20px;
              }

              .num {
                font-size: 28px;
                font-family: Barlow Condensed SemiBold;
                font-weight: normal;
                color: #252628;
                line-height: 22px;
                margin-bottom: 8px;
                // font-style: italic;
              }

              .name {
                font-size: 14px;
                
                font-weight: 400;
                color: #6a6973;
                margin-top: 11px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
